<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

import { ItemShopStore } from "@/stores/ItemAnShop";
import { useUseStore } from "@/stores/user";
import { getPayOrderAPI } from "@/server/api/rechargeOrder";

import { getJWTFun } from "@/hook/jsrsasign";
import { ToastFun } from "@/hook/toast";

import { eshopLimitPrice, shopLimitPrice } from "@/server/api/rechargeOrder";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const backgroundColor = [
  "linear-gradient(227deg, rgb(251 252 82 / 43%) 0%, rgb(255 255 255 / 0%) 100%), linear-gradient(134deg, rgb(254 226 134 / 74%) 0%, rgba(241, 246, 245, 0) 100%)",
  "linear-gradient(225.83deg, rgba(168, 255, 236, 0.43) 0%, rgba(245, 245, 245, 0) 100%), linear-gradient(147.41deg, rgba(211, 209, 255, 1) 0%, rgba(245, 245, 245, 0) 100%",
];

/*
&注册区
*/
const ItemShop = ItemShopStore();
const useStore = useUseStore();
const route = useRoute();
const router = useRouter();
const orderSize = route.query.value;


//网店提升额度积分价格
const iPrice = ref();
//实体店提升额度积分价格
const rPrice = ref();

const price = ref();//定义余额总数item
const priceShop = ref();//定义余额总数shop

/*
&函数区
*/
//网店
const internetPrice = async () => {
  const res = await eshopLimitPrice();
  iPrice.value = res.data.data;
  price.value = route.query.value * iPrice.value;
}
//实体店
const realPirce = async () => {
  const res = await shopLimitPrice();
  rPrice.value = res.data.data
  priceShop.value = route.query.value * rPrice.value;
}
// 跳转方法
const subOrder = async () => {
  // 生成订单id方法
  const isItem = ItemShop.IdtStatus === "item";
  const transactionAmount = isItem ? price.value + "" : priceShop.value + "";
  //订单传输数据

  const requestData = {
    chargeType: 0,
    permissionsCount: Number(route.query.value),
    transactionAmount,
    uid: useStore.userId,

  };
  // console.log(requestData);

  //toke加密
  const tokenizedData = getJWTFun(requestData);
  console.log(tokenizedData);
  ToastFun("Loading", { duration: 1000 });

  try {
    const res = await getPayOrderAPI(tokenizedData);
    const generatedOrderId = res.data.data;
    if (res.data.code !== 200) {
      return ToastFun("", {});
    }

    ToastFun("", {});
    let data = JSON.stringify({
      price: transactionAmount,
      orderId: generatedOrderId,
    });

    router.push({
      path: "payOrders",
      query: { data, orderSize },
    });
  } catch (error) {
    console.error("Error:", error);
    // 处理错误
  }
};
onMounted(() => {
  internetPrice();
  realPirce();
})
</script>

<template>
  <!-- 主体模块 -->
  <main class="payOrders">
    <div class="top">
      <top-button-center :title="$t('order.confirmOrder')" style="background-color: transparent" />
    </div>

    <div class="card" :style="{
      padding: '40rem 10rem 10rem 10rem',
      background:
        ItemShop.IdtStatus == 'item'
          ? backgroundColor[0]
          : backgroundColor[1],
      color: '#829',
      fontWeight: 600,
      fontSize: '25rem',
    }">
      Once the payment is successful, you can proceed
    </div>
    <div class="card integral">
      <div class="title">{{ $t("order.pointPay") }}</div>
      <span><van-icon name="checked" color="#642e8e" /></span>
    </div>
    <div class="card content">
      <!-- <div class="item">
        <div class="title">{{ $t("order.pointPay") }}</div>
        <span>{{ route.query.value }}</span>
      </div> -->
      <div class="item">
        <div class="title">{{ $t("order.payable") }}</div>
        <span>{{ ItemShop.IdtStatus == "item" ? price : priceShop }}</span>
      </div>
    </div>
    <div class="card integral">
      <div class="title">{{ $t("order.total") }}</div>

      <span style="color: #642e8e">
        {{ ItemShop.IdtStatus == "item" ? price : priceShop }}
      </span>
    </div>
    <footer>
      <div class="pay" @click="subOrder">{{ $t("order.submit") }}</div>
    </footer>
  </main>
</template>

<style lang="scss" scoped>
.payOrders {
  font-size: 14rem;
  position: relative;
  background-color: #f5f5f5;

  box-sizing: border-box;
  padding: 50rem 10rem 10rem;
  min-height: 100vh;
  max-height: 100vh;

  >.top {
    background-color: #f5f5f5;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
  }

  .card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 10rem;
    margin-top: 20rem;
    width: 100%;
    height: 140rem;
    background-color: #fff;
    border-radius: 10rem;

    h5 {
      font-size: 20rem;
      font-weight: 500;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: auto;

      .tex {
        color: #ddd;
        width: 40rem;
        text-align: center;
        line-height: 30rem;
      }

      .addCart {
        padding-left: 20rem;
        color: #4e4e4e;
        margin-left: auto;

        .total {
          b {
            font-size: 16rem;
          }
        }
      }
    }

    .title {
      font-size: 18rem;
      display: flex;
      justify-content: space-between;
    }
  }

  .integral {
    height: 60rem;
    font-size: 18rem;
    font-weight: 530;
    display: flex;
    justify-content: space-between;
    padding: 20rem 10rem;
    flex-direction: row;
  }

  .content {
    padding: 20rem 10rem;
    height: auto;

    .item {
      line-height: 50rem;
      display: flex;
      justify-content: space-between;
    }
  }
}

footer {
  .pay {
    position: fixed;
    bottom: 0rem;
    left: 0;
    right: 0;

    margin: 0 16rem 20rem;

    text-align: center;
    height: 40rem;
    line-height: 40rem;
    color: #fff;
    background-color: #642e8e;
    border-radius: 5rem;
    font-size: 16rem;
  }
}
</style>
